<template>
  <div>
    <navconH5 texts="修改密码" :leftShow="true" />
  </div>
  <div class="password_boxs">
    <div class="user-info-password-texts">
      <p class="texts">密码修改</p>
      <p class="texts2">您正在修改原始密码，请不要丢失！</p>
    </div>
    <div class="user-info-password">
      <t-form
        ref="rulesForm"
        :data="formData"
        :rules="rulesre"
        reset-type="initial"
        show-error-message
        label-align="left"
        scroll-to-first-error="auto"
      >
        <t-form-item label="账户名：" label-width="170" requiredMark>
          <span>{{ info.username }}</span>
        </t-form-item>
        <t-form-item label="手机号：" label-width="170" requiredMark>
          <span>{{ info.mobile }}</span>
        </t-form-item>
        <t-form-item
          label="新密码："
          label-width="170"
          prop="password"
          name="password"
          requiredMark
        >
          <t-input
            v-model.trim="formData.password"
            maxlength="60"
            clearable
            borderless
            align="left"
            placeholder="请输入新密码"
            style="width: 200px"
          ></t-input>
        </t-form-item>
      </t-form>
    </div>

    <t-button
      class="passbutton"
      theme="primary"
      @click="pasbutons"
      variant="outline"
      >修改密码</t-button
    >
  </div>
</template>

<script  setup>
import navconH5 from "@/components/navconH5.vue";
import { userupdate } from "@/api/api";
import { ref, reactive, defineProps, toRefs, onMounted, inject } from "vue";
import { BrowseOffIcon } from "tdesign-icons-vue-next";
import { Message } from "tdesign-mobile-vue";
import { useRouter, useRoute } from "vue-router";
import { useMutitabsStore } from "@/store/mutitabs";
import { useSiteThemeStore } from "@/store/siteTheme";

import { setStorage, getStorage } from "@/utils/util";
import { AppIcon } from "tdesign-icons-vue-next";

const rulesre = ref({
  password: [{ required: true, message: "请输入新密码", type: "error" }],
});

const route = useRoute(); // 使用 useRoute 获取当前路由信息
const router = useRouter(); //获取当前路由
const $dialog = inject("$dialog");
const info = JSON.parse(getStorage("userinfo"));
const userInfo = ref(Number(JSON.parse(getStorage("groupId")))); //权限
const mutitabsStore = useMutitabsStore();
const siteThemeStore = useSiteThemeStore();
const formData = ref({});
const rulesForm = ref(null);
const authority = (groupArr = [0]) => {
  // 权限筛选
  let userInfos = userInfo.value;
  // 当前权限和传来的权限组进行对比
  if (groupArr.some((item) => Number(item) === userInfos)) return true;
  return false;
};
const pasbutons = () => {
  rulesForm.value.validate().then((valid) => {
    if (valid == true) {
      $dialog.confirm({
        title: "密码修改",
        content: `是否修改密码？`,
        confirmBtn: { content: "确认", theme: "danger" },
        cancelBtn: "取消",
        onCancel: () => {
          return;
        }, // 点击取消的回调
        onConfirm: () => {
          userupdate({ password: formData.value.password }).then((res) => {
        if (res.code == 1) {
          formData.value.password = undefined;
          Message.success("密码修改成功");
          router.go(-1);
        } else {
          Message.warning(res.msg);
        }
      });
        },
      });
      
    }
  });
};
const exit = () => {
  console.log("点击了退出登录");
  $dialog.confirm({
    title: "退出登录",
    content: `是否退出当前登录？`,
    confirmBtn: { content: "确认", theme: "danger" },
    cancelBtn: "取消",
    onCancel: () => {}, // 点击取消的回调
    onConfirm: () => {
      // obj.status = 2;
      Message.success({
        content: "退出成功",
        placement: "center",
      });
    },
  });
};
</script>

<style lang="scss"  >
.password_boxs {
  font-size: 16px;
  padding: 0 15px;
  padding-top: 5vh;
}
.user-info-password {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  margin-top: 5vh;
}
.user-info-password-texts {
  .texts {
    font-size: 25px;
  }
  .texts2 {
    font-size: 16px;
  }
  font-size: 20px;
  line-height: 35px;
}
.passbutton {
  margin-top: 5vh;
  width: 100%;
}
</style>
  